<template>
  <div class="sidebar">
    <!-- 头部所有的东西 -->
    <div class="header padauto">
      <h1>处理中的项目</h1>
      <h2>{{dataList.length}}结果</h2>
    </div>
    <div v-if="isShow">
      <div class="content padauto" v-show="project">
        <h3 :class="{active:team}" @click="changeteam(true)">我的团队</h3>
        <h4 :class="{active:!team}" @click="changeteam(false)">其他团队</h4>
      </div>
      <div class="cont padauto">
        <input type="text" @keyup.enter="go_submit" v-model="enter">
        <img src="@/assets/img/search.png" alt="">
        <div :class="{active:sort}">
          <i class="iconfont" :class="{active:iActive}" @click="changesort(true)">&#xe73b;</i>
          <i class="iconfont" :class="{active:!iActive}" @click="changesort(false)">&#xe73c;</i>
        </div>
      </div>
    </div>
    <!-- 这是下面列表 -->
    <div class="list" :class="{active:!project}">
      <div v-for="(item,index) in dataList" :key="index" :class="{active:isActive==index}" @click="go_change(index)">
        <h5><i class="iconfont" v-if="item.status==4">&#xe6e6;</i>{{item.title}}</h5>
        <h6>{{item.created_at}}</h6>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store.js'
export default {
  data () {
    return {
      team: true,//切换团队
      sort: false,//排序
      listHeight: 0,//列表高度
      dataList: [],//list列表数据

      project:true,//是否具有其他团队
      isShow:true,//是否显示团队
      isActive:0,//切换团队
      enter:'',//关键字查询query
      iActive:true,//排序方式
      team_id:'',//team_id
    }
  },
  store,
  mounted () {
    // 登录
    // let params = {username:'18680880818',password:'123456'}
    // let params = {username:'18780269064',password:'123456'}
    // let params = {username:'15214141415',password:'123456'}
    // this.$api.Auth.login(params).then(res=>{
    //     sessionStorage.setItem('token',res.data.data.access_token)
    // })
    // this.$api.User.info().then(res=>{
    //     sessionStorage.setItem('userinfo',JSON.stringify(res.data.data))
    // })  
    
    let href = window.location.href.split("#/")[1].split("/")[0]
    let hrefActive = 0
    if(href == 'process'){
      
    }else if(href == 'wait'){
      hrefActive=1
    }else if(href == 'complete'){
      hrefActive=2
    }
    else if(href == 'paying'){
      hrefActive=3
    }
    else if(href == 'analysis'){
      hrefActive=4
    }
    store.commit('changehref', hrefActive)

    this.listHeight = document.body.clientHeight - 224
    let num = hrefActive
    let teamleave = sessionStorage.getItem('teamleave')

    let id = null
    //黄博的团队
    if(teamleave == 2){
      id = JSON.parse(sessionStorage.getItem('userinfo')).managed_teams.id
    }else if(teamleave == 0){
      id = JSON.parse(sessionStorage.getItem('userinfo')).teams[0].id
      this.isShow = false
    }else if(teamleave == 1){
      id = JSON.parse(sessionStorage.getItem('userinfo')).managed_teams.id
      this.isShow = false
    }
    this.team_id = id
    //待分配
    if(num == 1){
      this.isShow = false
      if(teamleave == 2){
        this.$api.Project.index({status:[3,4],size:100}).then(resp=>{
          // console.log(resp)
          this.dataList = resp.data.data
          this.go_change(0)
        })
      }else{
        this.$api.Project.index({status:[3,4],size:100,team_id:id}).then(resp=>{
          // console.log(resp)
          this.dataList = resp.data.data
          this.go_change(0)
        })
      }
    }
    //正在进行
    else if(num==0){
      this.$api.Project.index({status:5,size:100,team_id:id}).then(resp=>{
        console.log(resp)
        this.dataList = resp.data.data
        this.go_change(0)
      })
    }
    //已完成
    else if(num==2){
      this.$api.Project.index({status:6,size:100,team_id:id}).then(resp=>{
        // console.log(resp)
        this.dataList = resp.data.data
        this.go_change(0)
      })
    }
    //代付款
    else if(num == 3){
      this.isShow = false
      this.$api.Project.index({status:2,size:100}).then(resp=>{
        console.log(resp)
        this.dataList = resp.data.data
        this.go_change(0)
      })
    }
    //数据分析
    else if(num == 4){
      this.isShow = false
      this.$api.Project.index({status:1,size:100}).then(resp=>{
        console.log(resp)
        this.dataList = resp.data.data
        this.go_change(0)
      })
    }
    var pronum = localStorage.getItem('headernum')
    if(pronum == 0||pronum == 2){
      this.project = true
    }
    else if(pronum == 1||pronum == 3||pronum == 4){
      this.project = false
    }
    // }
    // //普通员工
    // else if(teamleave == 0){

    // }
    // //其他团队管理员
    // else if(teamleave == 1){
      
    // }
  },
  methods: {
    // 切换团队
    changeteam: function(req){
      let num = store.state.href
      let id = ''
      if(num == 0){
        if(req){
          id = JSON.parse(sessionStorage.getItem('userinfo')).managed_teams.id
        }else{
          id = '*'
        }
        this.team = req
        this.team_id = id
        this.$api.Project.index({status:5,size:100,team_id:id}).then(resp=>{
          this.dataList = resp.data.data
          this.go_change(0)
        })
      }
    },
    //切换排序
    changesort(req){
      let num = store.state.href
      if(num==0){
        this.iActive = req
        let direction = req?'desc':'asc'
        let query = null
        if(this.enter){
          query = this.enter
        }
        this.$api.Project.index({status:5,size:100,team_id:this.team_id,query:query,order_direction:direction}).then(res=>{
          console.log(res)
        })
      }
    },
    //选择某一项
    go_change(index){
      this.isActive = index
      let num = sessionStorage.getItem('headernum')
      if(num == 1||num==0||num==2||num==3||num == 4){
        if(num==1){
          this.$router.push('/wait')
        }else if(num==0){
          // this.$router.push('/process')
        }else if(num==4){
          this.$router.push('/analysis')
        }
        if(this.dataList.length>0){
          this.$api.Project.show(this.dataList[index].id).then(res=>{
            sessionStorage.setItem('reslutid',this.dataList[index].id)
            // console.log(res.data.data.id)
            this.$api.Node.index({project_id:res.data.data.id}).then(req=>{
              console.log(req)
              store.commit('changenode', req.data.data)
            })
            console.log(res)
            let arr = res.data.data.order.order_details
            //项目详情
            let obj = {}
            //用户详情
            let users = {}
            //高级润色
            if(res.data.data.order.type_id=="5cd73eee-db27-11e8-82a6-bc8385d5c60c"){
              obj.title = res.data.data.title
              obj.name = '高级润色'
              obj.type = 'editing'
              obj.language = arr.filter(item=>item.product.group_slug=='language')[0].product.title
              obj.word_count = arr.filter(item=>item.product.group_slug=='word_count')[0].product.title
              obj.service = arr.filter(item=>item.product.id=='a38a5a3f-db1c-11e8-82a6-bc8385d5c60c')[0]?true:false
              let num = arr.filter(item=>item.product.id=='bb519c92-db20-11e8-82a6-bc8385d5c60c')[0]
              obj.chart = num?num.quantity:0
              obj.format = arr.filter(item=>item.product.id=='bf7eb07a-db20-11e8-82a6-bc8385d5c60c')[0]?true:false
              obj.recommend = arr.filter(item=>item.product.id=='efc3198b-db20-11e8-82a6-bc8385d5c60c')[0]?true:false
              obj.detail = res.data.data.detail
              obj.price = res.data.data.order.price
              obj.created_at = res.data.data.order.created_at
              obj.manuscripts = res.data.data.manuscripts
              obj.charts = res.data.data.charts
              obj.references = res.data.data.references
              obj.id = res.data.data.id
              obj.user_id = res.data.data.user_id
              // console.log(obj)
            }
            //图表服务
            else if(res.data.data.order.type_id=="9e16c24a-db27-11e8-82a6-bc8385d5c60c"){
              obj.name = '图表服务'
              obj.type = 'chart'
              obj.title = res.data.data.title
              let num = arr.filter(item=>item.product.id=='0aa60924-db25-11e8-82a6-bc8385d5c60c')[0]
              obj.chart = num?num.quantity:0
              obj.format = arr.filter(item=>item.product.id=='51cab323-db25-11e8-82a6-bc8385d5c60c')[0]?true:false
              obj.recommend = arr.filter(item=>item.product.id=='569db569-db25-11e8-82a6-bc8385d5c60c')[0]?true:false
              obj.detail = res.data.data.detail
              obj.price = res.data.data.order.price
              obj.created_at = res.data.data.order.created_at
              obj.manuscripts = res.data.data.manuscripts
              obj.charts = res.data.data.charts
              obj.references = res.data.data.references
              obj.id = res.data.data.id
              obj.user_id = res.data.data.user_id
            }
            //数据分析   user_id User.show（）
            else if(res.data.data.order.type_id=="a44635f8-db27-11e8-82a6-bc8385d5c60c"){
              obj.name = '数据分析'
              obj.type = 'data'
              obj.title = res.data.data.title
              // obj.sample_num = arr.filter(item=>item.product.id=='cab2fbca-db26-11e8-82a6-bc8385d5c60c')[0].title
              obj.order_details = arr
              obj.price = res.data.data.order.price
              obj.created_at = res.data.data.order.created_at
              obj.charts = res.data.data.charts
              obj.id = res.data.data.id
              obj.node = res.data.data.nodes[0]
              obj.order_id = res.data.data.order_id
            }
            //项目详情
            store.commit('changepdetail', obj)
            //用户详情
            this.$api.User.show(res.data.data.user_id).then(res=>{
              // console.log(res)
              store.commit('changeusers', res.data.data)
            })
          })
        }else{
          store.commit('changepdetail', '')
          store.commit('changeusers', '')
        }
      }
    },
    //键盘事件
    go_submit(){
      let num = store.state.href
      if(num == 0){
        this.$api.Project.index({status:5,size:100,team_id:this.team_id,query:this.enter}).then(resp=>{
          // console.log(resp)
          this.dataList = resp.data.data
          this.go_change(0)
        })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../assets/css/iconfonta.css';
  $font-color: rgb(81,81,81);
  $font-cursor: default;

  .padauto{
    padding: 0 20px;
  }

  .sidebar{
    width: 346px;
    box-shadow:0px 4px 10px 0px rgba(53,53,53,0.2);
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 2;
    background: #fff;
    height: calc(100% - 80px);
    .header{
      display: flex;
      padding-top: 32px;
      align-items: flex-end;
      margin-bottom: 20px;
      h1{
        font-size: 18px;
        color: $font-color;
        cursor: $font-cursor;
      }
      h2{
        font-size: 14px;
        margin-left: 20px;
        color: $font-color;
        cursor: $font-cursor;
      }
    }
    .content{
      display: flex;
      align-items: center;
      h3,h4{
        width:151px;
        height:26px;
        border-radius:5px;
        text-align: center;
        color: $font-color;
        font-size: 14px;
        line-height: 26px;
        cursor: pointer;
      }
      h3.active,h4.active{
        background: rgb(230,230,230);
      }
    }
    .cont{
      display: flex;
      align-items: flex-end;
      margin-top: 10px;
      position: relative;
      justify-content: space-between;
      margin-bottom: 10px;
      input{
        width:207px;
        height:26px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(181,181,181,1);
        border-radius:5px;
        outline: none;
        padding: 0 10px 0 28px;
        color: $font-color;
        font-size: 14px;
      }
      >img{
        position: absolute;
        left: 25px;
        top: 4px;
      }
      div{
        display: flex;
        i{
          font-size: 16px;
          color: #E6E6E6;
          cursor: pointer;
          &.active{
            color:#56b0f8;
          }
        }
      }
      div.active{
        transform: rotate(180deg);
      }
    }
    .list{
      padding-left: 20px;
      overflow: hidden;
      height: calc(100% - 144px);
      &.active{
        height: calc(100% - 108px);
      }
      div{
        display: flex;
        width: 282px;
        height: 32px;
        margin-bottom: 10px;
        justify-content: space-between;
        align-items: flex-end;
        line-height: 32px;
        padding: 0 10px;
        h5{
          display: flex;
          align-items: center;
          font-size: 14px;
          color: $font-color;
          cursor: $font-cursor;
          width: 170px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          i{
            color: #56b0f8;
          }
        }
        h6{
          font-size: 11px;
          color: $font-color;
          cursor: $font-cursor;
        }
      }
      div.active{
        background: #56b0f8;
        h5,h6{
          color: #fff;
          i{
            color: #fff;
          }
        }
      }
    }
    .list:hover{
      overflow: scroll;
    }
    .list::-webkit-scrollbar {
      width: 10px;
      height: 1px;
    }
    .list::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(181,181,181,1);
    }
    .list::-webkit-scrollbar-track {
      border-radius: 10px;
      background: transparent;
    }
  }
</style>